import React, { Component } from 'react'
import "./detail.css";
import Title from "../../components/title/Title"
import { connect } from "react-redux"
import { getList, actions } from '../../store/modules/detail';
import { bindActionCreators } from "redux"
import { getInfo } from '../../store/modules/login';
class Detail extends Component {
    componentDidMount() {
        let { detail: { reqGoodsInfo } } = this.props;
        let id = this.props.match.params.id;
        //发送请求
        reqGoodsInfo(id)
    }
    render() {
        let {list,detail:{cateAdd}, info:{uid},match:{params:{id}},history} = this.props;
        let obj = list[0]?list[0]:{};
        return (
            <div>
                <Title title="详情页"></Title>
                <div className='header'>
                    <ul>
                        <li>商品</li>
                        <li>评价</li>
                        <li>详情</li>
                        <li>推荐</li>
                    </ul>
                </div>
                <div className="content">
                    <div className="slideshow">
                        <img src={obj.img} alt="" />
                        <span className="share"><i className="iconfont icon-fenxiang"></i></span>
                        <span className="number">8/8</span>
                    </div>
                    <div className="text">
                        <div className='text1'>
                            <b>&yen;</b>
                            <strong>{obj.price}</strong>
                            
                            <s>&yen;{obj.market_price}</s>
                            
                            <em>收藏</em>
                        </div>
                        <p>商品名称</p>
                        <span>11.11限时299元起</span>
                        <span>{obj.description}<em className="ck">查看</em></span>
                    </div>
                    <div  class="name"  style={{height:"1rem"}}>
                    <div className="ticket">
                        <ul className="ul-left">
                            {/* <li>领券</li> */}
                            <li>分期</li>
                        </ul>
                        <ul className="ul-right">
                            <li>
                                <em>可选3/6/12期</em>
                                <i className="iconfont icon-arrow-right"></i>
                            </li>

                        </ul>

                    </div>
                    </div>
                </div>

                <div className="de">
                    <div className="zuoh clearfix">
                        <div className="mmm fl">
                            <i>                               
                                <p>客服</p>
                            </i>
                            <i>
                                <p>店铺</p>
                            </i>
                            <i>
                                <p>购物车</p>
                            </i>
                        </div>
                        <div className="hhh fr">
                            <div className="fl" onClick={()=>cateAdd(id,uid,history)}><p>加入购物车</p>
                            </div>
                            <div className="fr"><p>立即购买</p></div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
//状态
let mapStateToProps = (state) => ({
    list: getList(state),
    info: getInfo(state)
});
//方法
let mapDispatchToProps = (dispatch) => ({
    detail: bindActionCreators(actions, dispatch)
});
export default connect(mapStateToProps, mapDispatchToProps)(Detail)